<template>
  <div class="page">
    <div class="user-container">
      <div class="menubar">
        <div class="menu-item" :class="{ active: active === 'center' }" @click="$router.push('/user/center')">
          <span class="menu-text">{{ $t('header.userCenter') }}</span>
        </div>
        <div class="menu-item" :class="{ active: active === 'shopping' }" @click="$router.push('/user/shopping')">
          <span class="menu-text">{{ $t('user.shoppingCart') }}</span>
        </div>
        <div class="menu-item" :class="{ active: active === 'order' }" @click="$router.push('/user/order')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('user.myOrder') }}</span>
            <span v-if="userReminder.orderQuantity > 0" class="badge">{{ userReminder.orderQuantity > 99 ? '99+' :
              userReminder.orderQuantity }}</span>
          </div>
        </div>
        <div class="menu-item" :class="{ active: active === 'warehouse' }" @click="$router.push('/user/warehouse')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('user.myWarehouse') }}</span>
            <span v-if="userReminder.warehouseQuantity > 0" class="badge">{{ userReminder.warehouseQuantity > 99 ? '99+'
              : userReminder.warehouseQuantity }}</span>
          </div>
        </div>
        <div class="menu-item" :class="{ active: active === 'shipment' }" @click="$router.push('/user/shipment')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('user.myWaybill') }}</span>
            <span v-if="userReminder.expressOrderQuantity > 0" class="badge">{{ userReminder.expressOrderQuantity > 99 ?
              '99+' : userReminder.expressOrderQuantity }}</span>
          </div>
        </div>
        <div class="menu-item" :class="{ active: active === 'assets' }" @click="$router.push('/user/assets')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('user.myAssets') }}</span>
          </div>
        </div>
        <div class="menu-item" :class="{ active: active === 'favorite' }" @click="$router.push('/user/favorite')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('store.mySubscriptions') }}</span>
            <span v-if="userReminder.expressOrderQuantity > 0" class="badge">{{ userReminder.expressOrderQuantity > 99 ?
              '99+' : userReminder.expressOrderQuantity }}</span>
          </div>
        </div>
        <!-- <div class="menu-item" :class="{ active: active === 'favorite' }" @click="$router.push('/user/winningRecord')">
          <div class="badge-wrapper">
            <span class="menu-text">{{ $t('routerTitle.winning_record') }}</span>
            <span v-if="userReminder.expressOrderQuantity > 0" class="badge">{{ userReminder.expressOrderQuantity > 99 ?
              '99+' : userReminder.expressOrderQuantity }}</span>
          </div>
        </div> -->
        <div class="menu-item" :class="{ active: active === 'com-share' }" @click="window.open('/com-share', '_blank')">
          <span class="menu-text"> {{ $t('user.promotionAlliance') }}</span>
        </div>
        <div class="menu-item" :class="{ active: active === 'setting' }" @click="$router.push('/user/setting')">
          <span class="menu-text">{{ $t('user.accountSetting') }}</span>
        </div>
      </div>
      <div class="user-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "index",
  data() {
    return {
      active: 'center'
    }
  },
  created() {
    this.active = this.$route.name;
  },
  watch: {
    '$route'() {
      this.active = this.$route.name;
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userReminder: state => state.user.userReminder,
    })
  }
}
</script>

<style scoped lang="less">
.page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: #F5F5F5;


  .user-container {
    display: flex;
    height: 100%;
    width: 1300px;
    margin: 16px auto;

    .menubar {
      width: 200px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 16px 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      height: 100%;
      box-sizing: border-box;

      .menu-item {
        padding: 12px 20px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        transition: all 0.2s;
        border-radius: 8px;
        margin: 0 8px;
        font-weight: 500;

        &:hover {
          background-color: #F8F8F8;
        }

        &.active {
          color: rgb(255, 24, 107);
          font-weight: 600;
          background-color: rgb(255, 237, 243);
        }

        .menu-text {
          display: flex;
          align-items: center;
        }

        .badge-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        }

        .badge {
          background: #FF186B;
          color: white;
          border-radius: 10px;
          padding: 2px 8px;
          font-size: 12px;
          font-weight: 500;
          min-width: 20px;
          text-align: center;
          line-height: 1.2;
        }
      }
    }

    .user-content {
      flex: 1;
      margin-left: 16px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
</style>